//获取提交节点
var submit=document.querySelector('[type="button"]')
//获取商品名称节点
var nameId=document.querySelector('[name="nameId"]')
//获取下拉框节点
var select =document.querySelector('#aa')
//获取原价节点
var price=document.querySelector('[name="price"]')
//获取现价节点
var reprice=document.querySelector('[name="reprice"]')
//获取库存节点
var number=document.querySelector('[name="number"]')
//获取单选框节点
var z=document.querySelectorAll('[name="y"]')
//获取类别的所有标签节点
var g = document.querySelectorAll('#g>span')

//对商品进行类别分类
function goods(){
    for(let i=0;i<g.length;i++){
        if(g[i].innerText != '全部'){//除对全部以外分类的点击事件
            g[i].onclick=function(){
                for(var j=0;j<g.length;j++){
                    g[j].className=''
                }
                this.className='active'
                var data=localStorage.getItem('data')
                var arr =JSON.parse(data)
               arr= arr.filter(v=>{
                  return  v.class===g[i].innerHTML
                })
                // console.log(arr)
                // for(var k=0;k<arr.length;k++){
                //     if( arr[k].class !==this.innerText){
                //         arr.splice(k,1)
                //         k--
                //     }         
                // }
                // console.log(arr) 
                document.querySelector('.tbodys').innerHTML='';
                var str=''
            arr.forEach(v=>{
                str +=`
                <tr>
                <td>${v.nameId}</td>
                <td>${v.class}</td>
                <td>${v.price}</td>
                <td>${v.reprice}</td>
                <td>${v.number}</td>
                <td>${v.biaoji}</td>
                <td class="del"><a href="javascript:;">删除</a></td>
            </tr>
                `
                document.querySelector('.tbodys').innerHTML=str
            })
    
            }
        }else{
            g[i].onclick=function(){ //对全部的点击事件
                for(var j=0;j<g.length;j++){
                    g[j].className=''
                }
                g[i].className='active'
                document.querySelector('.tbodys').innerHTML='';
                fn()
            }        
        }
    }
}
goods()


//表达验证且把获取数据存入本地存储
submit.onclick=function() {
    if(nameId.value===''){
        alert('商品名称不能为空')
        return false;
    }
    if(price.value===''){
        alert('原价不能为空')
        return false;
    }
    var reg=/^\d+$/
    if(!reg.test(price.value)){
        alert('请输入数字')
    }
    if(reprice.value===''){
        alert('现价不能为空')
        return false;
    }
    var reg=/^\d+$/
    if(!reg.test(reprice.value)){
        alert('请输入数字')
    }
    if(number.value===''){
        alert('库存不能为空')
        return false;
    }
    var reg=/^\d+$/
    if(!reg.test(number.value)){
        alert('请输入数字')
    }
    //获取单选值：true/false
    for(var i=0; i<z.length; i ++){
        if(z[i].checked){
            var biaoji=z[i].value;
        }
    }
    var data=localStorage.getItem('data')
    if(!data){
        localStorage.setItem('data',JSON.stringify([{
            nameId:nameId.value,
            class:select.value,
            price:price.value,
            reprice:reprice.value,
            number:number.value,
            biaoji:biaoji,
        }])) 
    }else{
        
        var arr=JSON.parse(data)
        arr.push({
            nameId:nameId.value,
            class:select.value,
            price:price.value,
            reprice:reprice.value,
            number:number.value,
            biaoji:biaoji,
        })
        localStorage.setItem('data',JSON.stringify(arr))
    } 
    fn()
    //添加后表单里面值清空
    nameId.value=''
    price.value=""
    reprice.value=''
    number.value=''

}

//将本地存储的数据渲染到网页中
fn()
function fn() {
    var data=localStorage.getItem('data')
    if(data){
        var arr=JSON.parse(data)
        var str=''
        arr.forEach(v=>{
            str +=`
            <tr>
            <td>${v.nameId}</td>
            <td>${v.class}</td>
            <td>${v.price}</td>
            <td>${v.reprice}</td>
            <td>${v.number}</td>
            <td>${v.biaoji}</td>
            <td class="del"><a href="javascript:;">删除</a></td>
        </tr>
            `
            document.querySelector('.tbodys').innerHTML=str
        })
    }
    
}


//删除表格
    document.querySelector('.tbodys').onclick = function(e){
        var data=localStorage.getItem('data')
        var arr =JSON.parse(data)
        var e = e || window.event;
        var target = e.target || e.srcElement
        console.log(target.parentElement.parentElement)
        if(target.innerText === '删除'){
            console.log(target.parentElement.parentElement.parentElement)
            target.parentElement.parentElement.parentElement.removeChild(target.parentElement.parentElement)
        //    localStorage.removeItem('data')      
            arr=arr.filter(v=>{
                return v.nameId !=target.parentElement.parentElement.firstElementChild.innerText
            })
                console.log(arr)
            localStorage.setItem('data',JSON.stringify(arr))
        }
    }
